/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-12-05 13:52:42
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-12-09 13:38:50
 * @FilePath: \adminstration\src\Pages\Front\Common\Options\FileCabinet.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { message, Modal, Result } from 'antd'
import { CommonSmallTitle } from '../Other/SmallTitle'
import { useRequest, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'
import { Player, BigPlayButton } from 'video-react'

// 文件柜弹出层
export const FileCabinetModal = ({ uuid, Off, className }) => {
    const [FileDetails, { setTrue, setFalse }] = useBoolean(false)
    const [DetailsUuid, setDetailsUuid] = useState()
    const { runAsync: getInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            console.log(list)
            setFilesList(list)
        },
    })
    const [FilesList, setFilesList] = useState()
    useEffect(() => {
        if (uuid) getInfoManageDetail({ url: 'getConstructionInfoManageStat', data: { InfoTypeManageUuid: uuid } })
    }, [uuid, getInfoManageDetail])

    const click = ({ uuid }) => {
        setDetailsUuid()
        setDetailsUuid(uuid)
        setTrue()
    }
    return (
        <Modal className="FileCabinetModal" open={true} onCancel={Off} footer={null} width={`70vw`}>
            <CommonSmallTitle
                className={className}
                title={FilesList && FilesList.length !== 0 && FilesList[0].infoTypeManageName}
                flex={1}
            >
                <div className="FileCabinetList">
                    {FilesList &&
                        FilesList.map(({ uuid, tableName, eventDate }) => (
                            <div key={uuid} onClick={() => click({ uuid })}>
                                <div>{tableName}</div>
                                <div>{eventDate}</div>
                            </div>
                        ))}
                </div>
            </CommonSmallTitle>
            {FileDetails && <FileCabinetDetail uuid={DetailsUuid} Off={setFalse} className={className} />}
        </Modal>
    )
}

// 展示附件
export const FileCabinetDetail = ({ uuid, Off, className }) => {
    const [FileDetails, { setTrue, setFalse }] = useBoolean(false)
    const [EnclosureList, setEnclosureList] = useState()
    const { runAsync: getConstructionInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            if (list.length === 0) {
                message.info('当前主题并无附件信息.')
                Off()
            } else {
                setEnclosureList(list)
            }
        },
    })

    useEffect(() => {
        if (uuid)
            getConstructionInfoManageDetail({ url: 'getConstructionInfoManageDetail', data: { InfoManageUuid: uuid } })
    }, [uuid, getConstructionInfoManageDetail])

    const [EnclosureUrl, setEnclosureUrl] = useState()

    const click = ({ fileUrl }) => {
        setEnclosureUrl()
        setEnclosureUrl(fileUrl)
        setTrue()
    }

    return (
        <Modal className="FileCabinetModal" open={true} onCancel={Off} footer={null} width={`70vw`}>
            <CommonSmallTitle className={className} title="附件列表" flex={1}>
                <div className="FileCabinetList">
                    {EnclosureList &&
                        EnclosureList.map(({ uuid, tableName, fileUrl }) => (
                            <div key={uuid} onClick={() => click({ fileUrl })}>
                                <div>{tableName}</div>
                            </div>
                        ))}
                </div>
            </CommonSmallTitle>
            {FileDetails && <EnclosureModal url={EnclosureUrl} Off={setFalse} className={className} />}
        </Modal>
    )
}

export const EnclosureModal = ({ url, Off, className }) => {
    const ImageBox = ({ url }) => <img src={url} alt={url} />
    const PdfBox = ({ url }) => <embed src={url} style={{ height: '100%', width: '100%' }} />
    const VideoBox = ({ url }) => (
        <Player fluid={false} width={'100%'} height={'100%'} playsInline src={url}>
            <BigPlayButton position="center" />
        </Player>
    )
    const OtherBox = () => <Result status="500" title="文件格式不支持预览" />
    const [type, setType] = useState('ImageBox')
    const AttachmentList = {
        ImageBox,
        PdfBox,
        VideoBox,
        OtherBox,
    }
    useEffect(() => {
        var suffix = url.substring(url.lastIndexOf('.') + 1).toLowerCase()
        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif') {
            setType('ImageBox')
        } else if (suffix === 'pdf') {
            setType('PdfBox')
        } else if (suffix === 'mp4') {
            setType('VideoBox')
        } else {
            setType('OtherBox')
        }
    }, [url])

    return (
        <Modal className="FileCabinetModal" open={true} onCancel={Off} footer={null} width={`70vw`}>
            <CommonSmallTitle className={className} title="附件信息" flex={1}>
                <div className="EnclosureModal">
                    {(() => {
                        const Template = AttachmentList[type]
                        return <Template url={url} />
                    })()}
                </div>
            </CommonSmallTitle>
        </Modal>
    )
}
